<template>
  <!-- <div class="scale-box" :style="{
          transform: `scale(${scale}) translate(-50%, -50%)`,
          WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
          width: `${width}px`,
          height: `${height}px`,
					backgroundColor
        }"> -->
  <div class="scale-box">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      backgroundColor: {
        type: String,
        default: '#020f17'
      }
    },
    data() {
      return {
        width: 0,
        height: 0,
        scale: 0
      }
    },
    created() {
      this.setScale()
      window.addEventListener('resize', () => {
        this.setScale()
      })
    },
    methods: {

      setScale() {
        this.scale = this.getScale()
      },
      getScale() {
        let width;
        let height;
        let innerWidth = window.innerWidth
        let innerHeight = window.innerHeight
        // const scale = innerWidth / innerHeight
        // if (scale > 1.8) {
        // 	width = 1920
        // 	height = 937
        // } else {
        // 	width = 1920
        // 	height = 1080
        // }
        width = 1920
        height = 1080
        let ww = innerWidth / width
        let wh = innerHeight / height
        this.width = width
        this.height = height
        const reslut = ww < wh ? ww : wh
        return reslut
      }
    }
  }
</script>

<style lang="less">
  .scale-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // position: fixed;
    min-width: 1200px;
    min-height: 700px;
    // transform-origin: 0 0;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transition: 0.3s;
  }
</style>
